<template>
	<app-layout>
		<view class="mine tn-safe-area-inset-bottom">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>走访录入</tn-nav-bar>
			<view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

				<view class="tn-padding-bottom-xl tn-bg-white">
					<block>
	
						<view class="tn-padding ">
							<tn-form :labelWidth="160" :model="form" ref="uForm" :errorType="['message']">
								<tn-form-item label="姓名" prop="xdusername">
									{{xduser.username}}
								</tn-form-item>
								<tn-form-item label="毛发编号" prop="xdusername">
									{{xduser.mfid}}
								</tn-form-item>
								<tn-form-item label="管控乡镇" prop="xdusername">
									{{xduser.gsxz}}
								</tn-form-item>
								<tn-form-item label="管控社工" prop="xdusername">
									{{xduser.gssg}}
								</tn-form-item>
								<tn-form-item label="被走访人" prop="bjfuser" :required="true">
									<tn-input :maxLength="7" v-model="form.bjfuser" type="text"
										placeholder="请输入被走访人姓名"></tn-input>
								</tn-form-item>
								<tn-form-item label="关系" prop="relation" :required="true">
									<tn-input v-model="form.relation" type="select" :selectOpen="relationShow"
										placeholder='选择关系' @click="relationShow = true" />
									<tn-select labelName="details" valueName="id" v-model="relationShow"
										:list="relationlist" @confirm="relationconfirm"></tn-select>
								</tn-form-item>
								<tn-form-item label="走访地点" prop="jfdd" :required="true">
									<tn-input v-model="form.jfdd" type="select" :selectOpen="addressShow"
										placeholder='选择走访地点' @click="addressShow = true" />
									<tn-select labelName="details" valueName="id" v-model="addressShow"
										:list="addresslist" @confirm="addressconfirm"></tn-select>
								</tn-form-item>
								<tn-form-item label="选择村委" prop="jfddok" v-if="form.placeid==97" :required="true">
									<tn-input v-model="form.jfddok" type="select" :selectOpen="cityShow"
										placeholder='选择村委(社区)' @click="cityShow = true" />
									<tn-select labelName="name" valueName="id" v-model="cityShow" :list="citylist"
										@confirm="cityconfirm" :searchShow="true"></tn-select>
								</tn-form-item>

								<tn-form-item label="选择城市" prop="pcaeraname" :required="true"
									v-if="form.placeid=='172'|| form.placeid=='100'|| form.placeid=='99' || form.placeid=='98'">
									<tn-input v-model="form.pcaeraname" type="select" :selectOpen="dqShow"
										placeholder='选择城市' @click="dqShow = true" />
									<tn-picker mode="region" v-model="dqShow" @confirm="dqconfirm"></tn-picker>
								</tn-form-item>


								<tn-form-item label="详细地址" prop="elaeraname" :required="true"
									v-if="form.placeid=='172'|| form.placeid=='100'|| form.placeid=='99' || form.placeid=='98'">
									<tn-input v-model="form.elaeraname" type="textarea" :border="!!0" :height="100"
										placeholder='详细地址' />
								</tn-form-item>
								<tn-form-item label="走访内容" prop="jfcomm" >
									<tn-input v-model="form.jfcomm" type="textarea" :border="!!0" :height="200"
										placeholder='请输入走访内容' />
								</tn-form-item>
								<tn-form-item label="走访照片" prop="url" :required="form.placeid=='99' || form.placeid=='98'">
									<view @click="showloading">
										<tn-image-upload :formData="formData" :action="action" @on-error="uperror"
											uploadText="拍照上传" :isdd="isdd" :autoUpload="!!1" @on-change="upchange"
											@on-success="upsuccess" @on-choose-complete="choosecomplete"
											:showUploadList="setting.showUploadList"
											:sourceType="setting.sourceType">
											</tn-image-upload>
									</view>
								</tn-form-item>

								<tn-form-item label="走访人" prop="jfuser" :required="true">
									<tn-input v-if="form.placeid==172" v-model="form.zhanghaouser" type="text"
										placeholder='请输入走访人' />
									<view v-else class="tn-flex tn-flex-wrap">
										<tn-checkbox-group @change="userchange">
											<tn-checkbox v-model="item.checked" v-for="(item, index) in witness"
												:key="index"
												:name="item.zhanghaouser">{{item.zhanghaouser}}</tn-checkbox>
										</tn-checkbox-group>
										<!-- <tn-checkbox v-model="item.checked" v-for="(item, index) in witness"
											:key="index" :name="item.zhanghaouser">{{item.zhanghaouser}}</tn-checkbox> -->
									</view>
								</tn-form-item>
								<tn-form-item label="走访时间" prop="jftime" :required="true">
									<tn-input v-model="form.jftime" placeholder='正在获取走访时间' disabled />
								</tn-form-item>
							</tn-form>
						</view>

					</block>
				</view>

			</view>
			<bottom-btn @save="save" subtext="存草稿" @submit="submit"></bottom-btn>
			<view class='tn-tabbar-height'></view>

		</view>
	</app-layout>
</template>

<script>
	import locationmixin from '@/libs/mixin/location_mixin.js'
	import {
		mapGetters,
		mapState
	} from 'vuex';

	export default {
		name: 'interviewadd',
		mixins: [locationmixin],
		data() {
			return {
				show: false,
				userShow: false,
				timestartShow: false,
				timeendShow: false,
				addShow: false,
				// 是否在录音
				isrecord: false,
				//录音时长
				recordime: 0,
				end_time: '',
				// 任务信息
				xduser: '',
				addressShow: false,
				addresslist: [],
				//村列表
				cityShow: false,
				citylist: [],
				//城市列表
				dqShow: false,
				//走访人列表
				witness: [],
				type: '',
				timer: '',
				//关系
				relationShow: false,
				relationlist: [],
				form: {
					mfid: '',
					bjfuser: '',
					relation: '',
					tzsj: '',
					pcaeraname: '',
					elaeraname: '',
					jfdd: '',
					placeid: '',
					cityname: '',
					jftime: '',
					jfcomm: '',
					jfuser: '',
					jfddok: '',
					tid: 0,
					url:''
				},
				rules: {
					jftime: [{
						required: true,
						message: '请选择走访时间',
						trigger: 'blur,change'
					}],
					jfdd: [{
						required: true,
						message: '请选择地点',
						trigger: 'blur,change'
					}],
					relation: [{
						required: true,
						message: '请选择关系',
						trigger: 'blur,change'
					}],
					// jfcomm: [{
					// 	required: true,
					// 	message: '请输入走访内容',
					// 	trigger: 'blur,change'
					// }],
					pcaeraname: [{
						required: true,
						message: '请选择城市',
						trigger: 'blur,change'
					}],
					elaeraname: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur,change'
					}],
					jfddok: [{
						required: true,
						message: '请选择村委',
						trigger: 'blur,change'
					}],

					jfuser: [{
						required: true,
						message: '请选择走访人',
						trigger: 'blur,change'
					}],
					url: [{
						required: false,
						message: '请上传走访照片',
						trigger: 'blur,change'
					},
					{
						validator: (rule, value, callback) => {
							if((this.form.placeid=='99' || this.form.placeid=='98') && (value=='' || !value)){
								return false
							}else{
								return true
							}
						},
						message: '请上传走访照片',
						trigger: ['change', 'blur'],
					}],
					bjfuser: [{
							required: true,
							message: '请输入中文姓名',
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								return this.$t.test.chinese(value);
							},
							message: '请输入中文姓名',
							trigger: ['change', 'blur'],
						}
					],
				},

			}
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		watch: {
			photo(nval, oval) {
				this.form.url = nval
			}
		},

		onLoad(options) {
			let t = this;
			this.form.mfid = options.mfid ? options.mfid : this.form.mfid;
			this.form.tid = options.tid ? options.tid : this.form.tid;
			this.formData = {
				mfid: this.form.mfid,
				type: 3
			}
			if (!this.form.mfid) {
				uni.showModal({
					title: '提示',
					content: '用户ID不存在，请稍后再试',
					showCancel: false,
					success() {
						this.goBack()
					}
				})
			}
		
			if (this.timer) {
				clearInterval(this.timer)
			}
			this.timer = setInterval(() => {
				t.form.jftime = t.$utils.datetime('Y-m-d h:i:s')
			}, 1000)
			this.getvillages()
			this.getplace()
			this.getdetection()
			this.getxduser()
			this.gettypelist()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			let t = this;
			if (!t.userinfo) {
				t.$user.getInfo()
			}
		},
		methods: {
			userchange(e) {
				let usernames = '';
				e.forEach(i => {
					usernames = `${usernames===''?'':usernames+','}${i}`

				})
				this.form.jfuser = usernames;
			},
			save() {

			},
			submit() {
				let t = this;
				// t.form.bjfuser = t.xduser.username;
				if (t.form.placeid == '172' || t.form.placeid == '100' || t.form.placeid == '99' || t.form.placeid == '98') {
					t.form.jfddok = `${t.form.pcaeraname}${t.form.elaeraname}`;
				}
				if (t.form.placeid == '95' || t.form.placeid == '96') {
					t.form.jfddok = ''
				}
				console.log('submit')
				this.$refs.uForm.validate(valid => {
					console.log('valid',valid)
					if (valid) {
						// 验证通过
						console.log('验证通过')
						let param = {
							...t.form
						}
						t.add(param)
					} else {
						// 验证失败
					}
				})
			},
			add(param) {
				let t = this;
				this.$t.message.loading("提交中");
				this.$request({
					url: this.$api.interview.add,
					data: param,
					method: 'POST'
				}).then(response => {
					t.$t.message.closeLoading();
					if (response.code === 0) {
						console.log('add', response.msg)
						t.$t.message.toast(response.msg);
				
						let url = `/discoveryPages/interview/list?mfid=${t.form.mfid}`
						if (t.form.tid) {
							console.log('t.form.tid', t.form.tid)
							url = `/discoveryPages/wait/interviewlist`
						}
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
							success() {
								uni.redirectTo({
									url: url
								});
							}
						});
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch((msg) => {
					t.$t.message.closeLoading();
				});
			},

			timeSelect(event) {
				let result = `${event.year}-${event.month}-${event.day} ${event.hour}:${event.minute}`
				this.form.jftime = result
			},

			dqconfirm(e) {
				this.form.pcaeraname = `${e.province.label}${e.city.label}${e.area.label}`
			},
			addressconfirm(e) {
				let t = this;
				let guishu = '';
				if (this.userinfo.usergroup == 'jbd' || this.userinfo.usergroup == 'admin') {
					guishu = this.xduser.gsxz
				} else {
					guishu = this.userinfo.guishu
				}
				if ((e[0].value == 95 || e[0].value == 96) && t.userinfo) {
					this.form.jfdd = `${guishu.replace('街道','').replace('镇','').replace('乡','')}${e[0].label}`
				} else {
					this.form.jfdd = e[0].label
				}
				this.form.placeid = e[0].value
				this.form.jfddok = ''

			},

			cityconfirm(e) {
				this.form.jfddok = e[0].label
				this.form.cityid = e[0].value
			},
			relationconfirm(e) {
				console.log(e[0])
				this.form.relation = e[0].label
				this.form.relationid = e[0].value
			},

			//获取检测地点
			getplace() {
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.common.place,
					method: 'POST',
					data: {
						//类型 1尿检地点 2走访地点
						type: 2
					}
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.addresslist = response.list;
					}

				}).catch(() => {
					this.$t.message.closeLoading();
				});
			},

			//获取村委关联列表
			getvillages() {
				this.$t.message.loading('加载中');
				//获取村委关联列表
				this.$request({
					url: this.$api.common.villages,
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.citylist = response.list;

					}
				});
			},
			//获取人员
			getdetection() {
				let t = this;
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.common.detection,
					data: {
						mfid: t.form.mfid
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.witness = response.list;
					}
				});
			},



			//获取检测种类
			gettypelist() {
				let t = this;
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.common.typelist,
					data: {
						did: 13
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.relationlist = response.list;
					}
					this.$t.message.closeLoading();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 15rpx;
	}

	.yx {
		padding: 0 20rpx;
		margin: 0 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		border: 1rpx solid #555555;
		border-radius: 10rpx;
		height: 50rpx;
	}

	.nm {
		width: 150rpx;
		text-align: right;
		padding-right: 10px;
	}

	.ilkresult {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: flex-end;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}


	.sign {
		width: 100%;
		height: 200rpx;
	}

	.photo {
		width: 100rpx;
		height: 120rpx;
		margin: 10rpx;
	}
</style>